<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>HTML辅助方法 | Is2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="HTML辅助方法">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML辅助方法">
<meta property="og:url" content="/2015/08/02/HTML-helper-methods/index.html">
<meta property="og:site_name" content="Is2">
<meta property="og:description" content="HTML辅助方法">
<meta property="og:updated_time" content="2016-10-08T12:45:59.918Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HTML辅助方法">
<meta name="twitter:description" content="HTML辅助方法">
  
    <link rel="alternate" href="/atom.xml" title="Is2" type="application/atom+xml">
  
  
    <link rel="icon" href="img/logo.ico">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

  

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">

  <link rel="stylesheet" href="/css/styles.css" type="text/css">
  

  
  <!--百度统计代码-->
  <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?37b51d72e2b91d854971620de6fef9bc";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<!--百度自动推送代码-->
<script>
(function(){
    var bp = document.createElement('script');
    bp.src = '//push.zhanzhang.baidu.com/push.js';
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
</head>

<body>
  <nav class="navbar navbar-inverse">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="main-menu-navbar">
      <ul class="nav navbar-nav">
        
          <li><a class=""
                 href="/index.html">首页</a></li>
        
          <li><a class=""
                 href="/categories/文集/">文集</a></li>
        
          <li><a class=""
                 href="/archives/">归档</a></li>
        
          <li><a class=""
                 href="/resource/">资源</a></li>
        
          <li><a class=""
                 href="/about/">关于</a></li>
        
        <li> <a href="/atom.xml">RSS</a> </li> 
      </ul>

      <!--
      <ul class="nav navbar-nav navbar-right">
        
          <li><a href="/atom.xml" title="RSS Feed"><i class="fa fa-rss"></i></a></li>
        
      </ul>
      -->
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

  <div class="container">
    <div class="blog-header">
  <h1 class="blog-title">Is2</h1>
  
    <p class="lead blog-description">我只想做的更好</p>
  
</div>

    <div class="row">
        <div class="col-sm-8 blog-main">
          <article id="post-HTML-helper-methods" class="article article-type-post" itemscope itemprop="blogPost">

  <header class="article-header">
    
  
    <h1 class="article-title" itemprop="name">
      HTML辅助方法
    </h1>
  


  </header>

  <div class="article-meta">
    <div class="article-datetime">
  <a href="/2015/08/02/HTML-helper-methods/" class="article-date"><time datetime="2015-08-02T15:15:02.000Z" itemprop="datePublished">2015-08-02</time></a>
</div>

    
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/Asp-Net-MVC/">Asp.Net MVC</a>
  </div>

  </div>
  <div class="article-inner">

    <div class="article-entry" itemprop="articleBody">
      
        <p>　　HTML辅助方法，也就是<code>HtmlHelper</code>，就是帮助快捷的产生HTML标签的作用。<br>　　HTML辅助方法可以编写超链接、表单(<form>)、输入框、选项、加载其他的分布视图(Partial View)等。</form></p>
<h3 id="超链接：Html-ActionLink">超链接：Html.ActionLink</h3><p>　　<code>@Html.ActionLink()</code>用于产生超链接。并且链接的文字部分会自动的进行HTML编码(HtmlEncode)。<br><a id="more"></a><br><strong>Html.ActionLink()方法重载</strong>:<br>　　<code>@Html.ActionLink(&quot;链接文字&quot;,&quot;Action_Name&quot;)</code>：该语法生成的超链接，点击后会跳转到“Action_Name(控制器方法)”所指向的Action。由于这里并没有指定“Controller”的名字，所以会指向默认(该页面所属)的控制器。<br>　　<code>@Html.ActionLink(&quot;链接文字&quot;,&quot;Action_Name&quot;,&quot;Controller_Name&quot;)</code>：如要将链接指向其他控制器(不是当前页面所属)时，应该在第三参数中注明控制器的名称。<br>　　<code>@Html.ActionLink(&quot;链接文字&quot;,&quot;Action_Name&quot;,new {id = 12,page = 5})</code>：当链接需要额外的路由参数时，可以传入匿名类型的数据。比如这里会生成这样的标签：<code>&lt;a href=&quot;/Controller_Name/Action_Name?id=12&amp;page=5&quot;&gt;链接文字&lt;/a&gt;</code><br>　　<code>@Html.ActionLink(&quot;链接文字&quot;,&quot;Action_Name&quot;,null,new {@class = &quot;btnLink&quot;})</code>：当要在生成的HTML标签中加入额外的HTML属性时，可以在第四个参数中加入。比如设置HTML的class属性。但是由于class是c#中的关键字，所以在 这里使用时需要在前面加上@符号；而且当需要输出带有“-”数属性时(HTML5的属性)，比如“data-value”，需要将“-”换成“_”。</p>
<p>　　<strong>使用Html.ActionLink()时，第一个参数不能输入空字符串或者null值，否则就会抛出异常。</strong></p>
<h3 id="表单提交：Html-BeginForm">表单提交：Html.BeginForm</h3><p>　　<code>@Html.BeginForm()</code>可以生成表单提交标签。表单的提交方式默认为Post，可以使用参数将提交方式修改为GET。<br>　　<br>Html.BeginForm()的两种使用方法：</p>
<ol>
<li><p>使用<code>@using{}</code>包裹住Html.BeginForm()以及表单中的标签成员</p>
<figure class="highlight scala"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="annotation">@using</span>(<span class="type">Html</span>.<span class="type">BeginForm</span>())</span><br><span class="line">&#123;</span><br><span class="line">    &lt;p&gt;账号：<span class="annotation">@html</span>.<span class="type">TextBox</span>(<span class="string">"Account"</span>)&lt;/p&gt;</span><br><span class="line">    &lt;p&gt;密码：<span class="annotation">@Html</span>.<span class="type">PassWord</span>(<span class="string">"PassWord"</span>)&lt;/p&gt;</span><br><span class="line">    &lt;input <span class="class"><span class="keyword">type</span>=</span><span class="string">"submit"</span> value=<span class="string">"注册"</span> /&gt;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>在开头和结尾分别使用<code>Html.BeginForm()</code>、<code>Html.EndForm()</code></p>
<figure class="highlight openscad"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">@&#123;Html.BeginForm<span class="params">(<span class="string">"About"</span>,<span class="string">"Home"</span>)</span>;&#125;</span><br><span class="line">    @Html.TextArea<span class="params">(<span class="string">"Date"</span>)</span></span><br><span class="line">    @Html.TextArea<span class="params">(<span class="string">"123"</span>)</span></span><br><span class="line">    &lt;input type=<span class="string">"submit"</span> /&gt;</span><br><span class="line">@&#123;Html.EndForm<span class="params">()</span>;&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>　　<strong>推荐使用using的方式编写Html.BeginForm(),因为代码比较可看。</strong></p>
<h4 id="使用GET方式提交表单">使用GET方式提交表单</h4><p>　　如果要使用GET方式提交表单，可以输入第三个参数<code>FormMethod.Get</code>：<br><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@using</span>(Html.<span class="function">BeginForm</span>(<span class="string">"Search"</span>,<span class="string">"Home"</span>,FormMethod.Get))</span><br><span class="line">&#123;</span><br><span class="line">    <span class="variable">@Html</span>.<span class="function">TextArea</span>(<span class="string">"2333"</span>)</span><br><span class="line">    &lt;input type=<span class="string">"submit"</span> /&gt;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h4 id="使用上传(提交)文件功能">使用上传(提交)文件功能</h4><p>　　想要实现上传文件的功能，需要在<code>&lt;form&gt;</code>表单中增加一个<code>enctype</code>属性，所以在Html.BeginForm()中需要添加第四个参数：<br>　　因为Html辅助方法中没有File方法，所以需要借助TextBox方法来代替，然后给TextBox传入第三个参数将type属性修改为file。<br><figure class="highlight dust"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml">@using(Html.BeginForm("Upload","File",FormMethod.Post,new </span><span class="expression">&#123;<span class="variable">enctype</span> = <span class="string">"multipart/from-data"</span>&#125;</span><span class="xml">))</span><br><span class="line"></span><span class="expression">&#123;</span><br><span class="line">    @<span class="variable">Html.TextBox</span>(<span class="string">"FileName"</span>,<span class="string">""</span>,<span class="variable">new</span> &#123;<span class="variable">type</span>=<span class="string">"file"</span>,<span class="variable">size</span>=<span class="string">"10"</span>&#125;</span><span class="xml">)</span><br><span class="line">    <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"submit"</span> /&gt;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!--输出的HTML代码为：--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">form</span> <span class="attribute">action</span>=<span class="value">"/File/Upload"</span> <span class="attribute">enctype</span>=<span class="value">"multipart/from-data"</span> <span class="attribute">method</span>=<span class="value">"post"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="title">input</span> <span class="attribute">id</span>=<span class="value">"FileName"</span> <span class="attribute">name</span>=<span class="value">"FileName"</span> <span class="attribute">size</span>=<span class="value">"10"</span> <span class="attribute">type</span>=<span class="value">"file"</span> <span class="attribute">value</span>=<span class="value">""</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"submit"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">form</span>&gt;</span></span></span><br></pre></td></tr></table></figure></p>
<h4 id="常用的表单输入辅助方法">常用的表单输入辅助方法</h4><p>　　● <code>Html.BeginForm()</code>：输出<code>&lt;form&gt;</code>标签<br>　　● <code>Html.EndForm()</code>：输出<code>&lt;/form&gt;</code>标签<br>　　● <code>Html.Lable()</code>：输出<code>&lt;lable&gt;</code>标签<br>　　● <code>Html.TextBox()</code>：输出<code>&lt;input type=&quot;text&quot; /&gt;</code>标签<br>　　● <code>Html.TextArea()</code>：输出<code>&lt;textarea&gt;</code>标签，可以指定rows和column的值。<br>　　● <code>Html.PassWord()</code>：输出<code>&lt;input type=&quot;password&quot; /&gt;</code>标签<br>　　● <code>Html.Checkbox()</code>：输出<code>&lt;input type=&quot;checkbox&quot; /&gt;</code>标签<br>　　● <code>Html.RadioButton()</code>：输出<code>&lt;input type=&quot;radio&quot; /&gt;</code>标签，可以指定是否要默认选取预设值<code>@Html.ReadioButton(&quot;name&quot;,&quot;vlaue&quot;,true)</code>。<br>　　● <code>Html.DropDownList()</code>：输出<code>&lt;select&gt;</code>标签<br>　　● <code>Html.ListBox()</code>：输出<code>&lt;select mulitiple&gt;</code>标签<br>　　● <code>Html.Hidden()</code>：输出<code>&lt;input type=&quot;hidden&quot;/&gt;</code>标签<br>　　● <code>Html.ValidationSummary()</code>：输出表单验证失败是的错误信息摘要</p>
<p>　　这些标签大多都有重载，比如<code>@Html.TextBox()</code>重载：<br><figure class="highlight dust"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml">@Html.TextBox("UserName","Is2",new</span><span class="expression">&#123;<span class="variable">id</span>=<span class="string">"textId"</span>&#125;</span><span class="xml">)</span><br><span class="line"><span class="comment">&lt;!--输出下面的HTML代码：--&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">input</span> <span class="attribute">id</span>=<span class="value">"textId"</span> <span class="attribute">name</span>=<span class="value">"UserName"</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">value</span>=<span class="value">"Is2"</span> /&gt;</span></span></span><br></pre></td></tr></table></figure></p>
<h3 id="强类型的辅助方法">强类型的辅助方法</h3><p>　　强类型的辅助方法也就是可以在辅助方法中使用@model加载需要的内容，而且可以使用简洁的lambda表达式。<br>　　强类型的辅助方法名称基本上就是“原本的名字后面加上For”，比如<code>@Html.TextBox()</code>的强类型形式就是<code>@Html.TextBoxFor()</code>。<br>　　要使用强类型的辅助方法，需要在View最开始注明强类型模式:<code>@model MvcApplicationTest.Product</code>。</p>
<h4 id="使用强类型辅助方法的例子">使用强类型辅助方法的例子</h4><p><strong>数据模型：</strong><br><figure class="highlight cs"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">using</span> System.ComponentModel;</span><br><span class="line"><span class="keyword">using</span> System.ComponentModel.DataAnnotations;</span><br><span class="line"></span><br><span class="line"><span class="keyword">namespace</span> <span class="title">MvcApplicationTest</span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="keyword">public</span> <span class="keyword">class</span> <span class="title">Product</span></span><br><span class="line">    &#123;</span><br><span class="line">        <span class="keyword">public</span> <span class="keyword">int</span> Id&#123; <span class="keyword">get</span>; <span class="keyword">set</span>; &#125;</span><br><span class="line">        [Required]</span><br><span class="line">        [DisplayName(<span class="string">"产品名称"</span>)]</span><br><span class="line">        <span class="keyword">public</span> <span class="keyword">string</span> Name&#123; <span class="keyword">get</span>; <span class="keyword">set</span>; &#125;</span><br><span class="line">        [Required]</span><br><span class="line">        [DisplayName(<span class="string">"产品说明"</span>)]</span><br><span class="line">        <span class="keyword">public</span> <span class="keyword">string</span> Description&#123; <span class="keyword">get</span>; <span class="keyword">set</span>; &#125;</span><br><span class="line">        [Required]</span><br><span class="line">        <span class="keyword">public</span> <span class="keyword">int</span> UnitPrice&#123; <span class="keyword">get</span>; <span class="keyword">set</span>; &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p><strong>View：</strong><br><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@model</span> MvcApplicationTest.Product</span><br><span class="line"></span><br><span class="line"><span class="variable">@using</span>(Html.<span class="function">BeginForm</span>())</span><br><span class="line">&#123;</span><br><span class="line">    <span class="variable">@Html</span>.<span class="function">ValidationSummary</span>(true)</span><br><span class="line">    </span><br><span class="line">    &lt;fieldset&gt;</span><br><span class="line">        &lt;h2&gt;产品信息&lt;/h2&gt;</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">            <span class="variable">@Html</span>.<span class="function">LableFor</span>(model=&gt;model.Name)</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">        &lt;div&gt;</span><br><span class="line">            <span class="variable">@Html</span>.<span class="function">LableFor</span>(model=&gt;model.Description)</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">        &lt;input type=<span class="string">"submit"</span> /&gt;</span><br><span class="line">    &lt;/fieldset&gt;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h3 id="使用辅助方法加载分布视图">使用辅助方法加载分布视图</h3><p>　　使用<code>@Html.Partial()</code>方法可以在View中加载一个分布视图(Partial View)。<br>　　因为分布视图是片段式的，所以需要在一个完整页面中加载分布视图。如果分布视图中需要参数，也可以在方法中传入。</p>
<p><strong>index.cshtml</strong><br><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@model</span> MvcApplicationTest.Product</span><br><span class="line"></span><br><span class="line"><span class="variable">@Html</span>.<span class="function">Partial</span>(<span class="string">"ProductInfo"</span>,(object)model.Name)</span><br></pre></td></tr></table></figure></p>
<p><strong>Partial View(ProductInfo)</strong><br><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@model</span> System.String</span><br><span class="line"></span><br><span class="line"><span class="variable">@Html</span>.<span class="function">TextBox</span>(model)</span><br></pre></td></tr></table></figure></p>

      
    </div>

    
      

    
    <br/><br/>
<!--baidu share-->

<div class="bdsharebuttonbox"><a class="bds_more" href="#" data-cmd="more">分享到：</a><a title="分享到新浪微博" class="bds_tsina" href="#" data-cmd="tsina">新浪微博</a><a title="分享到微信" class="bds_weixin" href="#" data-cmd="weixin">微信</a><a title="分享到QQ空间" class="bds_qzone" href="#" data-cmd="qzone">QQ空间</a><a title="分享到QQ好友" class="bds_sqq" href="#" data-cmd="sqq">QQ好友</a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{"bdSize":16}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
  
<!--baidu share-->
    <footer class="article-footer">
      <a data-url="/2015/08/02/HTML-helper-methods/" data-id="ciqvzmht6005wcsvl5gb9552l" class="article-share-link">
        <i class="fa fa-share"></i> Share
      </a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Asp-Net-MVC/">Asp.Net MVC</a></li></ul>


    </footer>
  </div>
  
    
<ul id="article-nav" class="nav nav-pills nav-justified">
  
  <li role="presentation">
    <a href="/2015/07/18/Write-the-template-directive-met-problems/" id="article-nav-older" class="article-nav-link-wrap">
      <i class="fa fa-chevron-left pull-left"></i>
      <span class="article-nav-link-title">directive中写template遇见的问题</span>
    </a>
  </li>
  
  
  <li role="presentation">
    <a href="/2015/09/19/Extends-MVC-MVP-and-MVVM/" id="article-nav-newer" class="article-nav-link-wrap">
      <span class="article-nav-link-title">MVC延伸：MVP、MVVM</span>
      <i class="fa fa-chevron-right pull-right"></i>
    </a>
  </li>
  
</ul>


  
</article>


<section id="comments">
  <div id="disqus_thread">
    <!-- 多说评论框 start -->
	<div class="ds-thread" data-thread-key="2015/08/02/HTML-helper-methods/" data-title="HTML辅助方法" data-url="/2015/08/02/HTML-helper-methods/"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"hais2"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
	</script>
<!-- 多说公共JS代码 end -->
  </div>
</section>


        </div>
        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          
  <div class="sidebar-module sidebar-module-inset">
<a style="text-decoration:none" title="有本事点我一下试试.." href='javascript:(function() {
	function c() {
		var e = document.createElement("link");
		e.setAttribute("type", "text/css");
		e.setAttribute("rel", "stylesheet");
		e.setAttribute("href", f);
		e.setAttribute("class", l);
		document.body.appendChild(e)
	}
 
	function h() {
		var e = document.getElementsByClassName(l);
		for (var t = 0; t < e.length; t++) {
			document.body.removeChild(e[t])
		}
	}
 
	function p() {
		var e = document.createElement("div");
		e.setAttribute("class", a);
		document.body.appendChild(e);
		setTimeout(function() {
			document.body.removeChild(e)
		}, 100)
	}
 
	function d(e) {
		return {
			height : e.offsetHeight,
			width : e.offsetWidth
		}
	}
 
	function v(i) {
		var s = d(i);
		return s.height > e && s.height < n && s.width > t && s.width < r
	}
 
	function m(e) {
		var t = e;
		var n = 0;
		while (!!t) {
			n += t.offsetTop;
			t = t.offsetParent
		}
		return n
	}
 
	function g() {
		var e = document.documentElement;
		if (!!window.innerWidth) {
			return window.innerHeight
		} else if (e && !isNaN(e.clientHeight)) {
			return e.clientHeight
		}
		return 0
	}
 
	function y() {
		if (window.pageYOffset) {
			return window.pageYOffset
		}
		return Math.max(document.documentElement.scrollTop, document.body.scrollTop)
	}
 
	function E(e) {
		var t = m(e);
		return t >= w && t <= b + w
	}
 
	function S() {
		var e = document.createElement("audio");
		e.setAttribute("class", l);
		e.src = i;
		e.loop = false;
		e.addEventListener("canplay", function() {
			setTimeout(function() {
				x(k)
			}, 500);
			setTimeout(function() {
				N();
				p();
				for (var e = 0; e < O.length; e++) {
					T(O[e])
				}
			}, 15500)
		}, true);
		e.addEventListener("ended", function() {
			N();
			h()
		}, true);
		e.innerHTML = " <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";
		document.body.appendChild(e);
		e.play()
	}
 
	function x(e) {
		e.className += " " + s + " " + o
	}
 
	function T(e) {
		e.className += " " + s + " " + u[Math.floor(Math.random() * u.length)]
	}
 
	function N() {
		var e = document.getElementsByClassName(s);
		var t = new RegExp("\\b" + s + "\\b");
		for (var n = 0; n < e.length; ) {
			e[n].className = e[n].className.replace(t, "")
		}
	}
 
	var e = 30;
	var t = 30;
	var n = 350;
	var r = 350;
	var i = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";
	var s = "mw-harlem_shake_me";
	var o = "im_first";
	var u = ["im_drunk", "im_baked", "im_trippin", "im_blown"];
	var a = "mw-strobe_light";
	var f = "//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";
	var l = "mw_added_css";
	var b = g();
	var w = y();
	var C = document.getElementsByTagName("*");
	var k = null;
	for (var L = 0; L < C.length; L++) {
		var A = C[L];
		if (v(A)) {
			if (E(A)) {
				k = A;
				break
			}
		}
	}
	if (A === null) {
		console.warn("Could not find a node of the right size. Please try a different page.");
		return
	}
	c();
	S();
	var O = [];
	for (var L = 0; L < C.length; L++) {
		var A = C[L];
		if (v(A)) {
			O.push(A)
		}
	}
})()'>
    <h4>Hi</h4>
</a>

  
  <h5>我是海建东,欢迎访问我的博客.</h5>

</div>


  
  <div class="sidebar-module">
    <h4>分类</h4>
    <ul class="sidebar-module-list"><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/categories/ASP-NET/">ASP.NET</a><span class="sidebar-module-list-count">4</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/categories/ASP-NET-Web-API/">ASP.NET Web API</a><span class="sidebar-module-list-count">1</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/categories/Asp-Net-MVC/">Asp.Net MVC</a><span class="sidebar-module-list-count">3</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/categories/Git/">Git</a><span class="sidebar-module-list-count">3</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/categories/Hexo/">Hexo</a><span class="sidebar-module-list-count">10</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/categories/SQL/">SQL</a><span class="sidebar-module-list-count">8</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/categories/UWP/">UWP</a><span class="sidebar-module-list-count">2</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/categories/Umbraco/">Umbraco</a><span class="sidebar-module-list-count">11</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/categories/c/">c#</a><span class="sidebar-module-list-count">18</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/categories/前端开发/">前端开发</a><span class="sidebar-module-list-count">3</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/categories/文集/">文集</a><span class="sidebar-module-list-count">12</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/categories/设计模式/">设计模式</a><span class="sidebar-module-list-count">6</span></li></ul>
  </div>



  
  <div class="sidebar-module">
    <h4>标签</h4>
    <ul class="sidebar-module-list"><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/ASP-NET/">ASP.NET</a><span class="sidebar-module-list-count">1</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/ASP-NET-Core/">ASP.NET Core</a><span class="sidebar-module-list-count">2</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/ASP-NET-Web-API笔记/">ASP.NET Web API笔记</a><span class="sidebar-module-list-count">1</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/AngularJS/">AngularJS</a><span class="sidebar-module-list-count">2</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/Asp-Net-MVC/">Asp.Net MVC</a><span class="sidebar-module-list-count">3</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/EntityFramework/">EntityFramework</a><span class="sidebar-module-list-count">1</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/Git学习/">Git学习</a><span class="sidebar-module-list-count">3</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/Hexo博客搭建/">Hexo博客搭建</a><span class="sidebar-module-list-count">10</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/SQL-Server/">SQL Server</a><span class="sidebar-module-list-count">8</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/UWP学习笔记/">UWP学习笔记</a><span class="sidebar-module-list-count">2</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/Umbraco入门/">Umbraco入门</a><span class="sidebar-module-list-count">11</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/WebForm/">WebForm</a><span class="sidebar-module-list-count">1</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/c-基础知识/">c#基础知识</a><span class="sidebar-module-list-count">6</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/c-学习笔记/">c#学习笔记</a><span class="sidebar-module-list-count">12</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/jQuery/">jQuery</a><span class="sidebar-module-list-count">1</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/影评：其实就是观后感/">影评：其实就是观后感</a><span class="sidebar-module-list-count">4</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/设计模式学习笔记/">设计模式学习笔记</a><span class="sidebar-module-list-count">6</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/转载/">转载</a><span class="sidebar-module-list-count">7</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/tags/随笔/">随笔</a><span class="sidebar-module-list-count">8</span></li></ul>
  </div>



  
  <div class="sidebar-module">
    <h4>归档</h4>
    <ul class="sidebar-module-list"><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2016/07/">七月 2016</a><span class="sidebar-module-list-count">4</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2016/05/">五月 2016</a><span class="sidebar-module-list-count">3</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2016/04/">四月 2016</a><span class="sidebar-module-list-count">2</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2016/03/">三月 2016</a><span class="sidebar-module-list-count">14</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2016/02/">二月 2016</a><span class="sidebar-module-list-count">6</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2016/01/">一月 2016</a><span class="sidebar-module-list-count">23</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2015/10/">十月 2015</a><span class="sidebar-module-list-count">2</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2015/09/">九月 2015</a><span class="sidebar-module-list-count">1</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2015/08/">八月 2015</a><span class="sidebar-module-list-count">1</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2015/07/">七月 2015</a><span class="sidebar-module-list-count">2</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2015/06/">六月 2015</a><span class="sidebar-module-list-count">4</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2015/05/">五月 2015</a><span class="sidebar-module-list-count">7</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2015/04/">四月 2015</a><span class="sidebar-module-list-count">6</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2015/03/">三月 2015</a><span class="sidebar-module-list-count">2</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2015/02/">二月 2015</a><span class="sidebar-module-list-count">1</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2015/01/">一月 2015</a><span class="sidebar-module-list-count">1</span></li><li class="sidebar-module-list-item"><a class="sidebar-module-list-link" href="/archives/2014/11/">十一月 2014</a><span class="sidebar-module-list-count">2</span></li></ul>
  </div>



  <!---->
  <div class="sidebar-module">
    <h4>最近访客</h4>
    <!--<ul class="sidebar-module-list">
      
        <li>
          <a href="/2016/07/19/Journey-Under-the-Midnight-Sun/">行走在白昼的夜里</a>
        </li>
      
        <li>
          <a href="/2016/07/18/Hexo-misspelled-tag/">Hexo标签分类写错的处理</a>
        </li>
      
        <li>
          <a href="/2016/07/17/Value-types-and-reference-types/">值类型和引用类型</a>
        </li>
      
        <li>
          <a href="/2016/07/17/Fiddler-caught-analysis-API/">使用Fiddler抓包分析API</a>
        </li>
      
        <li>
          <a href="/2016/05/14/Hexo-Getting-Started-1/">8、使用SSH方式部署博客</a>
        </li>
      
    </ul>
    
    <div class="ds-recent-visitors" data-num-items="12" data-avatar-size="28" id="ds-recent-visitors"></div>
-->
<!-- 多说最新评论 start -->
	<div class="ds-recent-comments" data-num-items="5" data-show-avatars="1" data-show-time="1" data-show-title="1" data-show-admin="0" data-excerpt-length="20"></div>
<!-- 多说最新评论 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"hais2"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0] 
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
	</script>
<!-- 多说公共JS代码 end -->
<br><br>
<!---->

  
  <div class="sidebar-module">
    <h4>标签云</h4>
    <p class="tagcloud">
      <a href="/tags/ASP-NET/" style="font-size: 10px;">ASP.NET</a> <a href="/tags/ASP-NET-Core/" style="font-size: 11.11px;">ASP.NET Core</a> <a href="/tags/ASP-NET-Web-API笔记/" style="font-size: 10px;">ASP.NET Web API笔记</a> <a href="/tags/AngularJS/" style="font-size: 11.11px;">AngularJS</a> <a href="/tags/Asp-Net-MVC/" style="font-size: 12.22px;">Asp.Net MVC</a> <a href="/tags/EntityFramework/" style="font-size: 10px;">EntityFramework</a> <a href="/tags/Git学习/" style="font-size: 12.22px;">Git学习</a> <a href="/tags/Hexo博客搭建/" style="font-size: 17.78px;">Hexo博客搭建</a> <a href="/tags/SQL-Server/" style="font-size: 16.67px;">SQL Server</a> <a href="/tags/UWP学习笔记/" style="font-size: 11.11px;">UWP学习笔记</a> <a href="/tags/Umbraco入门/" style="font-size: 18.89px;">Umbraco入门</a> <a href="/tags/WebForm/" style="font-size: 10px;">WebForm</a> <a href="/tags/c-基础知识/" style="font-size: 14.44px;">c#基础知识</a> <a href="/tags/c-学习笔记/" style="font-size: 20px;">c#学习笔记</a> <a href="/tags/jQuery/" style="font-size: 10px;">jQuery</a> <a href="/tags/影评：其实就是观后感/" style="font-size: 13.33px;">影评：其实就是观后感</a> <a href="/tags/设计模式学习笔记/" style="font-size: 14.44px;">设计模式学习笔记</a> <a href="/tags/转载/" style="font-size: 15.56px;">转载</a> <a href="/tags/随笔/" style="font-size: 16.67px;">随笔</a>
    </p>
  </div>


  
  <div class="sidebar-module">
     <iframe width="100%" height="550" class="share_self"  frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=550&fansRow=2&ptype=1&speed=0&skin=5&isTitle=1&noborder=0&isWeibo=1&isFans=1&uid=3311041262&verifier=85e63399&dpc=1"></iframe>
  </div>


  
  <div class="sidebar-module">
    <h4>友情链接</h4>
    <a href="http://www.cnblogs.com/artech/" target="_blank">Artech</a><br/>
    <a href="http://www.deepthink.pub" target="_blank">DeepThink</a><br/>
    <a href="http://edi.wang/" target="_blank">Edi.wang</a><br/>
    <a href="http://www.lanhusoft.com/Article/List" target="_blank">LanHuSoft</a><br/>
    <a href="http://www.ruanyifeng.com/blog/" target="_blank">阮一峰的网络日志</a><br/>
    <a href="http://www.cnblogs.com/shanyou/" target="_blank">张善友</a><br/>
  </div>




        </div>
    </div>
  </div>
  <footer class="blog-footer">
  <div class="container">
    <div id="footer-info" class="inner">
      &copy; 2016 Is2<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a> and <a href="https://github.com/haijiandong/haijiandong.github.io" target="_blank">GitHub</a><br/>
      Total <span id="busuanzi_value_site_pv"></span> views.  Total <span id="busuanzi_value_site_uv"></span> guests.  Total <span id="busuanzi_value_page_pv"></span> Hits.
    </div>
  </div>
</footer>

  

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>


<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css">
  <script src="/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>


<script src="/js/script.js" type="text/javascript"></script>

</body>
</html>